<template>
	<view>
		<u-navbar leftIconSize="0" :bgColor="showNav ? 'transparent' : '#fff'" :title="showNav ? '' : '我的'"></u-navbar>
		<image src="/static/img/my/bjt.png" style="width: 100%; height: 508rpx" mode=""></image>
		<view class="my-box">
			<view class="my-name zdy-flex" @click="$tn('/pages/login')">
				<u--image :showLoading="true" shape="circle" src="/static/img/my/wd.png" width="65rpx" height="65rpx"></u--image>
				<span>尊贵的会8员</span>
				<image src="/static/img/my/sz.png" @click="$tn('/pages/set')" style="width: 36rpx; height: 36rpx; margin-left: auto" mode=""></image>
			</view>
			<view class="my-member">
				<view class="my-member-top zdy-flex zdy-flex-direction zdy-flex-between">
					<view class="my-member-grade">
						<span class="">普通会员</span>
						<span class="duration">永久有效</span>
					</view>
					<view class="promote zdy-flex zdy-flex-between zdy-flex-align-center">
						<text>间夜/累积</text>
						<view class="">立即升级</view>
					</view>
				</view>
				<view class="my-member-bottom zdy-flex zdy-flex-between zdy-flex-align-center">
					<view class="my-member-item zdy-flex zdy-flex-direction zdy-flex-center" v-for="item in wealList" :key="item.label">
						<image :src="item.src" mode="" style="width: 40rpx; height: 40rpx; margin-bottom: 15rpx"></image>
						<view class="">{{ item.label }}</view>
					</view>
					<view>
						<span>更多权益</span>
						<u-icon size="12" color="#333333" name="play-right-fill" bold></u-icon>
					</view>
				</view>
			</view>
			<view class="order-box zdy-flex zdy-flex-between zdy-flex-center">
				<view class="zdy-flex zdy-flex-direction zdy-flex-center" @click="$tn(item.url)" v-for="item in orderList" :key="item.label">
					<image :src="item.src" mode="" style="width: 40rpx; height: 40rpx; margin-bottom: 15rpx"></image>
					<view class="">{{ item.label }}</view>
				</view>
			</view>
			<view class="my-ticket zdy-flex zdy-flex-between">
				<view class="zdy-flex zdy-flex-between my-ticket-item">
					<view class="">
						<view class="">我的积分</view>
						<view class="my-ticket-count">500</view>
					</view>
					<image src="/static/img/my/wdjf.png" style="width: 95rpx; height: 95rpx" mode=""></image>
				</view>
				<view class="zdy-flex zdy-flex-between my-ticket-item" @click="$tn('/activity/couponList')">
					<view class="">
						<view class="">优惠券</view>
						<view class="my-ticket-count">1张可用</view>
					</view>
					<image src="/static/img/my/yhq.png" style="width: 95rpx; height: 95rpx" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			showNav: true, //隐藏导航栏背景
			wealList: [
				{ label: '积分权益', src: '/static/img/my/jfqy.png' },
				{ label: '延迟退房', src: '/static/img/my/yctf.png' },
				{ label: '每月领券', src: '/static/img/my/mylq.png' },
				{ label: '生日礼', src: '/static/img/my/srl.png' }
			],
			orderList: [
				{ label: '酒店订单', src: '/static/img/my/jddd.png', url: '/order/roomOrder' },
				{ label: '商城订单', src: '/static/img/my/scdd.png', url: '/order/roomOrder' },
				{ label: '门票', src: '/static/img/my/mp.png' },
				{ label: '餐饮', src: '/static/img/my/cy.png' },
				{ label: '收藏夹', src: '/static/img/my/scj.png' }
			]
		};
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	computed: {
		...mapState('userInfo', ['userInfo']),
		...mapGetters('userInfo', ['access_token']),
		userName() {
			const { access_token, name } = this.userInfo;
			if (access_token) {
				return name ? name : '未设置昵称';
			} else {
				return '登录/注册';
			}
		}
	},
	onShow() {
		if (this.access_token) {
			this.getUserInfo();
		}
		console.log(this.access_token, 'access_token');
	},
	methods: {
		...mapMutations('userInfo', ['setRoomInfo']),
		//获取用户的信息
		getUserInfo() {
			this.setRoomInfo();
		}
	}
};
</script>

<style>
page {
	background-color: #e6f8f7;
}
</style>
<style scoped lang="scss">
.my-box {
	position: relative;
	padding: 0 30rpx 60rpx;
	margin-top: -320rpx;
	.my-name {
		margin-bottom: 10rpx;
		line-height: 65rpx;
		span {
			font-weight: bold;
			margin-left: 25rpx;
			font-size: 34rpx;
		}
	}
	.my-member {
		border-radius: 10rpx;
		.my-member-top {
			position: relative;
			padding: 50rpx 30rpx;
			height: 280rpx;
			background-image: url('/static/img/my/hykp.png');
			background-size: cover; /* 背景图片覆盖整个盒子 */
			background-position: center; /* 背景图片居中 */
			.my-member-grade {
				font-family: Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 38rpx;
				.duration {
					margin-left: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.promote {
				font-weight: 500;
				font-size: 22rpx;
				view {
					border-radius: 99rpx;
					background-color: #04b9b2;
					padding: 10rpx 30rpx;
					font-size: 22rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
		.my-member-bottom {
			margin-top: -15rpx;
			border-radius: 0 0 10rpx 10rpx;
			padding: 35rpx 35rpx 20rpx;
			background-color: #ffffff;
			.my-member-item {
				font-weight: 500;
				font-size: 20rpx;
			}
			span {
				margin-right: 20rpx;
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}
	.order-box {
		margin: 50rpx 0;
		font-weight: bold;
		font-size: 26rpx;
	}
	.my-ticket {
		.my-ticket-item {
			width: 48%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 25rpx;
			font-weight: bold;
			font-size: 30rpx;
			.my-ticket-count {
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}
	}
}
</style>
